<script setup>
import { ref, onMounted, onUnmounted } from "vue"
import { useCodeEditStore } from '../store'
import { storeToRefs } from 'pinia'
import "codemirror/mode/javascript/javascript.js"
import Codemirror from "codemirror-editor-vue3"
const store = useCodeEditStore()
const { code } = storeToRefs(store)
const cmRef = ref()
const cmOptions = {
  mode: "text/javascript"
}
const onChange = (val, cm) => {
  console.log(val)
  console.log(cm.getValue())
}

const onInput = (val) => {
  console.log(val)
}

const onReady = (cm) => {
  console.log(cm.focus())
}

onMounted(() => {
  setTimeout(() => {
    cmRef.value?.refresh()
  }, 1000)

  setTimeout(() => {
    cmRef.value?.cminstance.isClean()
  }, 3000)
})

onUnmounted(() => {
  cmRef.value?.destroy()
})
</script>

<template>
  <div class="code-edit">
    <div class="code-menu">
        <n-button  class="no-drag">代码库1</n-button>
        <n-button  class="no-drag">代码库2</n-button>
        <n-button  class="no-drag">代码库1</n-button>
        <n-button  class="no-drag">代码库2</n-button>
        <n-button  class="no-drag">代码库1</n-button>
        <n-button  class="no-drag">代码库2</n-button>
    </div>
    <div class="code-content">
    <Codemirror
        v-model:value="code"
        :options="cmOptions"
        class="input no-drag"
        border
        ref="cmRef"
        @change="onChange"
        @input="onInput"
        @ready="onReady"
     />
    </div>
  </div>
</template>

<style scoped>
.input{
  margin: 0;
  padding: 0;
  max-height: 98%;
}
.code-edit{
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
}
.code-menu{
  width: 100px;
}
.code-content{
  width: 100%;
  height: 100%;
}
</style>
